<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>登录</title>
	<link rel="icon" href="../image/logo.ico" type="image/x-icon">
	<link rel="stylesheet" href="../css/login.css" />
</head>

<body>
	<div class="body">
		<input type="hidden" id="repeatToken" style="width: 0px;height: 1px;">
		<!--<img src="img/tubiao-09.png" class="logo" />-->
		<p class="logo">Cattle</p>
		<div class="body_count">
			<div class="login_count">
				<div class="login_count_a">

					<div id="all">
						<ul id="option">
							<li class="active login_left">密码登录</li>
							<li class="login_right">账号登录</li>
							<li class="login_right">邮箱登录</li>
						</ul>
						<ul id="card">
							<li class="active">
								<!--输入框-->
								<div class="login_bot_count">
									<img src="../imge/name.png" alt="" />
									<input type="" name="" id="nickname" placeholder="请输入用户名" id="one" />
								</div>
								<div class="login_bot_count">
									<img src="../imge/password.png" alt="" />
									<input type="password" name="" id="password" placeholder="请输入密码" id="one" />
								</div>
								<div class="login_bot">
									<a>忘记密码?</a>
									<p><input type="checkbox" name="vehicle" value="Bike" id="remember" />记住密码</p>
								</div>
								<!--登录按钮-->
								<button class="login_button" id="user_login">登录</button>
							</li>
							<li class="login_account">
								<!--输入框-->
								<div class="login_account_count">
									<img src="img/tubiao-05.png" alt="" />
									<select class="account_select">
										<option value="+86">+86</option>
										<option value="+852">+852</option>
										<option value="+853">+853</option>
										<option value="+886">+886</option>
									</select>
									<img src="img/line-down.png" alt="" class="account_select_icon" />
									<input type="" name="" class="mobile_input" placeholder="请输入手机号码" id="phone" />
								</div>
								<div class="login_account_counts">
									<img src="img/tubiao-06.png" alt="" />
									<input type="" name="" id="phone_code" placeholder="请输入验证码" />
									<input class="account_code" type="button" id="phone_btn" value="获取验证码" />
								</div>
								<!--登录按钮-->
								<button class="login_account_button" id="phone_login">登录</button>
							</li>

							<li class="login_account">
								<!--输入框-->
								<div class="login_account_count">
									<input class="mobile_input" placeholder="请输入邮箱" id="email" />
								</div>

								<div class="login_account_counts">
									<input id="email_code" placeholder="请输入验证码" />
									<input class="account_code" type="button" id="email_btn" value="获取验证码" />
								</div>
								<!--登录按钮-->
								<button class="login_account_button mail_login" id="email_login">登录</button>
							</li>

						</ul>
					</div>

				</div>
			</div>

		</div>
	</div>



	<script src="../js/jquery.min.js"></script>
	<script src="../plugs/layui/dist/layui.js"></script>
	<script type="text/javascript" src="../js/login.js"></script>

	<script>

		$(function () {
			// 页面一加载向后端发起请求获取不允许重复提交的token
			let clientid = parseInt(Math.random() * 10000 + 10000);
			let login_info = localStorage.getItem("login_info");
			if (login_info != null) {
				let infos = login_info.split(":");
				if (new Date().getTime() - infos[2] < 7*24*60*60*1000) {
					$("#nickname").val(infos[0]);
					$("#password").val(infos[1]);
					let ck = document.getElementById("remember");
					ck.checked = true;
				}else{
					localStorage.removeItem("login_info");
					layer.msg("登录信息过期请重新登录", { icon: 2, anim: 6 });
				}
			}
			$.ajax({
				type: "get",
				url: "http://localhost:70/devu/user/getToken",
				data: { clientid: clientid },
				success: function (res) {
					$("#repeatToken").val(res.content);
				}
			})



			$("#email_btn").click(function () {
				let email = $("#email").val();
				let repeatToken = $("#repeatToken").val();
				let index = layer.load(5);
				$.ajax({
					type: "get",
					url: "http://localhost:70/devu/user/email",
					data: { email: email, repeatToken: repeatToken, clientid: clientid },
					success: function (res) {
						if (res.code == "200") {
							layer.close(index);
							layer.msg(res.msg, { icon: 1, anim: 6 });
						}
						else {
							layer.close(index);
							layer.msg(res.msg, { icon: 2, anim: 6 });
						}
					}

				})

			})

			$("#email_login").click(function () {
				let email = $("#email").val();
				let code = $("#email_code").val();
				$.ajax({
					type: "get",
					url: "http://localhost:70/devu/user/login",
					data: { email: email, code: code },
					success: function (res) {
						if (res.code == "200") {
							localStorage.setItem("token", res.content);
							window.location = "index.html"
						}
						else {
							let errors = res.content;
							for (let key in errors) {
								layer.msg(errors[key], { icon: 2, anim: 6 });
							}

							layer.msg(res.msg, { icon: 2, anim: 6 });
						}
					}
				})
			})
			$("#phone_btn").click(function () {
				let phone = $("#phone").val();
				let repeatToken = $("#repeatToken").val();
				let index = layer.load(5);
				$.ajax({
					type: "get",
					url: "http://localhost:70/devu/user/phone",
					data: { phone: phone, repeatToken: repeatToken, clientid: clientid },
					success: function (res) {
						if (res.code == "200") {
							layer.close(index);
							layer.msg(res.msg, { icon: 1, anim: 6 });
						} else {
							layer.close(index);
							layer.msg(res.msg, { icon: 2, anim: 6 });
						}
					}
				})
			});
			$("#phone_login").click(function () {
				let phone = $("#phone").val();
				let code = $("#phone_code").val();
				$.ajax({
					type: "get",
					url: "http://localhost:70/devu/user/plogin",
					data: { phone: phone, code: code },
					success: function (res) {
						if (res.code == "200") {
							localStorage.setItem("token", res.content);
							window.location = "index.html"
						} else {
							let errors = res.content;
							for (let key in errors) {
								layer.msg(errors[key], { icon: 2, anim: 6 });
							}
							layer.msg(res.msg, { icon: 2, anim: 6 });
						}
					}
				})
			});
			$("#user_login").click(function () {
				let nickname = $("#nickname").val();
				let password = $("#password").val();
				let ck = document.getElementById("remember");
				$.ajax({
					type: "get",
					url: "http://localhost:70/devu/user/ulogin",
					data: { nickname: nickname, password: password },
					success: function (res) {
						if (res.code == "200") {
							if (ck.checked) {
								let firstTime = new Date().getTime();
								localStorage.setItem("login_info", nickname + ":" + password + ":" + firstTime);
							}
							localStorage.setItem("token", res.content);
							window.location = "index.html"
						} else {
							let errors = res.content;
							for (let key in errors) {
								
								layer.msg(errors[key], { icon: 2, anim: 6 });
							}
							layer.msg(res.msg, { icon: 2, anim: 6 });
						}
					}
				})
			});
		})
	</script>
</body>

</html>